<template>
  <el-dialog
    v-model="visible"
    v-if="load"
    title="批量导入"
    width="600"
    show-footer
    show-zoom
    resize
    @close="close"
    :close-on-click-modal="false"
    :close-on-press-escape="false"
  >
    <div class="row">
      <div class="row-title">第 1 步：点击下载模版</div>
      <a
        href="javascript:void(0)"
        class="row-main bg-gray-200 text-center pt-3 pb-3 block"
        @click="download"
      >
        <span class="text-blue-500"
          ><svg-icon class="mr-1 inline-block" icon-class="download"></svg-icon>
          下载模版</span
        >
      </a>
    </div>
    <div class="row">
      <div class="row-title">第 2 步：按照模版要求填写</div>
      <div class="row-main"></div>
    </div>
    <div class="row">
      <div class="row-title">
        第 3 步：上传填写完成的文件
        <template v-if="messageInfo"
          >({{ messageInfo.message }}
          <a :href="messageInfo.filepath" class="text-blue-500">下载导入结果</a>) 成功
          {{ messageInfo.success }} 条，失败 {{ messageInfo.fails }}</template
        >
      </div>
      <div class="uploadBox">
        <productUpload
          ref="productUploadRef"
          :limit="limit"
          :validator="validator"
          :progress="true"
          type="channel"
          :form="form"
          @success="success"
        >
          <div class="flex items-center justify-center">
            <el-button type="primary" link>
              <svg-icon class="mr-2" icon-class="Plus"></svg-icon>
              上传文件
            </el-button>
          </div>
        </productUpload>
      </div>
      <!-- <div class="upload-area mt-2 flex flex-wrap pt-4 pl-4" v-if="fileList.length">
        <div class="upload-tips">已上传文件</div>
        <div class="mr-4 mb-4 w-full" v-for="(item, index) in fileList" :key="item.url">
          <div class="flex justify-start items-center">
            <div class="line1 w-4/5">{{ item.filename }}</div><svg-icon icon-class="state_fail_cover"
              class="text-base text-white z-10 inline-block" @click="handleRemove(index)" />
          </div>
        </div>
      </div> -->
    </div>
    <div class="text-[#999999]">
      <div>1、只支持新增，一次最多200条数据</div>
      <div>2、若是多属性SKU，则SPUID需保持一致</div>
      <div>3、请下载最新导入模版进行导入</div>
      <div>
        4、导入的数据比较多时，导入处理时间较长，请耐心等待；导入完毕后，异常数据支持下载；
      </div>
    </div>
    <template #footer>
      <el-button @click="close">取 消</el-button>
      <el-button type="primary" :loading="loading" @click="save()">上传</el-button>
    </template>
  </el-dialog>
</template>
<script setup name="ImportChannel">
import { computed, reactive, ref, toRefs } from "vue";
import productUpload from "./productUpload/index.vue";
import { templateDownload } from "@/api/index.js";
import { ElMessage } from "element-plus";
import { downloadFile } from "@/utils/downloadFile.js";

const visible = ref(false);
const loading = ref(false);
const props = defineProps({
  treeData: {
    type: Array,
    default: () => [],
  },
});

const download = async () => {
  const src =
    "https://xc-goods.oss-cn-shenzhen.aliyuncs.com/goods/20241024/V3.2172974023160136.2.xlsx";
  downloadFile(src, "产品批量新增模版V3.2.xlsx", false);
};

const data = reactive({
  limit: 0, // 最大文件上传数
  form: {},
  messageInfo: null,
  load: false,
});
const { limit, form, messageInfo, load } = toRefs(data);

const open = async (val) => {
  if (!load.value) {
    load.value = true;
    await 1;
  }
  form.value.platform = val;
  visible.value = true;
};

const success = (obj) => {
  ElMessage.success("执行完成，请查看执行结果");
  messageInfo.value = obj;
};
// 上传校验
const validator = (fileInfo) => {
  return (() => {})();
};

const emits = defineEmits(["query"]);

// 文件上传
const productUploadRef = ref();
const save = async () => {
  productUploadRef.value.submitUpload();
};

const close = () => {
  productUploadRef.value.clearFiles();
  messageInfo.value = null;
  visible.value = false;
};
defineExpose({ open });
</script>
<style lang="scss" scoped>
.uploadBox {
  border-radius: 4px;
}

.row {
  .row-title {
    font-size: 14px;
    font-weight: bold;
    color: #0a1431;
    line-height: 20px;
    padding: 8px 0;
  }
}

.upload-area {
  background: #fafafa;
  border-radius: 4px;

  .upload-tips {
    font-size: 12px;
    font-weight: 400;
    color: #9da1ad;
    line-height: 17px;
    text-align: center;
    padding: 4px 0;
  }
}
</style>
